<script setup lang="ts">
import { ref } from "vue";
const doctor = ref(JSON.parse(localStorage.getItem("doctor")) || []);
const no=ref(false);
// 判断doctor是否为空
if (doctor.value.length === 0) {
  no.value = false;
}else{
  no.value = true;
}

// 关注医生
</script>

<template>
  <!-- 关注的医生 -->
  <div :class="no ? 'myDoctor' : 'myDoctor-none'">
    <div class="myDoctor-top">
      <span>我的医生</span>
      <span>更多<van-icon name="arrow" /></span>
    </div>
    <div class="myDoctor-item">
      <dl>
        <dt>
          <img src="https://robohash.org/19141?set=set1" alt="" />
        </dt>
        <dd>
          <div class="ddTop">
            <span>涂晓宇</span>&nbsp;<span style="color: #5f5f5f; font-size: 12px"
              >主治医师</span
            >
          </div>
          <div class="ddCom">东莞市第八人名医院（东莞市儿童医院）</div>
        </dd>
      </dl>
    </div>
  </div>
</template>
<!-- 11 -->
<style scoped lang="scss">
.myDoctor-none {
  display: none;
  width: 0;
  height: 0;
}

.myDoctor {
  width: 100%;
  height: 135px;
  background-color: #fff;
  padding-top: 10px;
  display: block;

  .myDoctor-top {
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
  }

  .myDoctor-item {
    width: 100%;
    height: 100px;
    display: flex;
    padding-top: 12px;

    dl {
      width: 86%;
      height: 80px;
      background-color: #f4f4f4;
      display: flex;
      margin-left: 10px;
      border-radius: 7px;

      dt {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        margin-left: 5px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      dd {
        width: 100%;
        height: 100%;
        margin-top: 10px;
        font-size: 0.3rem;
        padding-left: 10px;

        .ddTop {
          display: flex;
          margin-bottom: 5px;
        }

        .ddCom {
          font-size: 0.27rem;
          color: #5f5f5f;
        }
      }
    }
  }
}
</style>
